<template>
    <h1>toRef和toRefs讲解</h1>
    <div>姓名:{{name}}</div>
    <div>年龄:{{age}}</div>
    <div>妻子:{{wife.name}}</div>
    <div>岳父:{{wife.father.name}}</div>
    <button @click="updateInfo">修改信息</button>
</template>

<script>
import { reactive,toRefs} from 'vue'

export default {
  name:'App',
  setup(){
    const person=reactive({
      name:'Giles',
      age:23,
      wife:{
        name:'Monica',
        father:{
          name:'Johan'
        }
      }
    })
    const updateInfo=()=>{
       person.name="jerry";
       person.age=32;
       person.wife.name="marry";
       person.wife.father.name="jack"
       console.log('aa',toRefs(person)); 
    }
    
    return{
      ...toRefs(person),
      updateInfo
    }
  }
}
</script>

<style>

</style>